<template>
    <!-- 一键仲裁 -->
    <div class="onclick">
        <h2>一键仲裁</h2>
        <div class="spanLine"></div>
        <div class="prove" v-animate="'queue-bottom'">
            <div class="prove_img">
                <div class="bgImg">
                    <ul>
                        <li>
                            <div class="num">01</div>
                            <div class="text">仲裁申请书<br/> 自动生成</div>
                            <div class="line"></div>
                        </li>
                        <li>
                            <div class="line"></div>
                            <div class="text">证据即时传输 <br/>当天立案</div>
                            <div class="num">02</div>
                        </li>
                        <li>
                            <div class="num">03</div>
                            <div class="text">最快7天 <br/>出裁决书</div>
                            <div class="line"></div>
                        </li>

                        <li>
                            <div class="line"></div>
                            <div class="text">案件状态 <br/>实时反馈</div>
                            <div class="num">04</div>
                        </li>
                        <li>
                            <div class="num">05</div>
                            <div class="text">仲裁流程 <br/>全部线上完成</div>
                            <div class="line"></div>
                        </li>
                    </ul>
                </div>
            </div>
            <p>速裁通可信电子证据平台通过有效的在线取证技术，能够进一步协助司法体系解决电子证据认证难的问题，使电子证据在线上司法环境当中实现取证、存证、认证的完整团环。</p>
            <p>
                速裁通系统储存的证据链，能够通过高效的类案通道，直达法院、仲裁系统，省去司法机构对案件证据真实性验证、合法性验证、关联性验证、完整性验证等案件审理的证据验证环节，大幅缩减司法审判的时间，提升不良案件处理效率。</p>
        </div>
    </div>
</template>

<script>
    export default {
        name: "OnClick"
    }
</script>

<style scoped lang="less">
    .onclick {
        text-align: center;
        padding-bottom: 50px;
        h2 {
            font-size: 34px;
            margin: 40px 0;
            color: #2C3E50;
            line-height: 21px;
        }

        .prove:hover {
            box-shadow: 0px 0px 20px 0px rgba(6, 0, 1, 0.2000);
        }

        .prove {
            width: 71%;
            height: 100%;
            background: #FFFFFF;
            border: 1px solid rgba(6, 0, 1, 0.2000);
            border-radius: 30px;
            margin: 68px auto;
            padding-bottom: 50px;
            transition: all .7s;

            .prove_img {
                width: 100%;
                height: 250px;
                padding-top: 50px;
                margin-bottom: 100px;
                border-radius: 30px 30px 0 0;
                background-repeat: no-repeat;
                background-size: 100% 100%;

                .bgImg {

                    width: 75%;
                    height: 220px;
                    margin: 0 auto;
                    background-image: url(../assets/images/serverall/quxian.png);
                    background-repeat: no-repeat;
                    background-size: 100% 100%;

                    ul {
                        position: relative;
                    }

                    ul li:nth-child(1) {
                        position: absolute;
                        left: -7%;
                        margin-top: 5%;
                    }

                    ul li:nth-child(2) {
                        position: absolute;
                        left: 17%;
                        margin-top: -1%;
                    }

                    ul li:nth-child(3) {
                        position: absolute;
                        left: 45%;
                        margin-top: 5%;

                    }

                    ul li:nth-child(4) {
                        position: absolute;
                        left: 69%;
                        top: 10%;

                    }

                    ul li:nth-child(5) {
                        position: absolute;
                        left: 90%;
                        margin-top: 5%;

                        .text {
                            width: 191px;
                        }

                    }

                    ul li .num {
                        color: #000000;
                        font-size: 69px;
                        opacity: 0.2;
                    }

                    ul li .text {
                        font-size: 30px;
                        color: #1DD2AF;
                    }

                    ul li .line {
                        width: 36px;
                        height: 3px;
                        background: #1DD2AF;
                        margin: 10px auto;
                    }
                }
            }

            p {
                font-size: 18px;
                margin-top: 25px;
                padding: 0 95px;
            }
        }
    }
</style>
